<template>
	<view class="index_box">
		<!-- 1_bgImg -->
		<view class="bgImg pos_rel">
			<view class="cover pos_abs"></view>
			<image v-bind:src="imgu[0]" mode="aspectFill"></image>
		</view>

		<!-- 2_pageTitle -->
		<text class="pageTitle pos_abs" v-bind:style="{top:barHeight + 'px'}">{{ shop_name }}</text>

		<!-- 3_userInfo-->
		<view class="userInfo pos_rel">
			<image class="uiImg pos_abs" src="../../static/images/img_bg.png"></image>
			<view class="avatar pos_abs">
				<image :src="info.avatar" mode="aspectFill"></image>
			</view>
			<view class="words pos_abs">
				<view class="dpflxr">
					<view class="icon">
						<image src="../../static/images/icon_sj.png"></image>
					</view>
					<text class="num">{{ info.mobile }}</text>
				</view>
				<text class="name">{{ info.firstname }}{{ info.lastname }}</text>
			</view>
		</view>

		<!-- 4_category -->
		<view class="funcCate dpflxr">
			<navigator url="../index_membership/index_membership" hover-class="none" class="fcItem dpflxcjc">
				<view class="icon">
					<image src="../../static/images/icon_hygl.png"></image>
				</view>
				<text>会员管理</text>
			</navigator>
			<navigator url="../index_transaction/index_transaction" hover-class="none" class="fcItem dpflxcjc">
				<view class="icon">
					<image src="../../static/images/icon_jygl.png"></image>
				</view>
				<text>交易管理</text>
			</navigator>
			<navigator url="../index_employee/index_employee" hover-class="none" class="fcItem dpflxcjc">
				<view class="icon">
					<image src="../../static/images/icon_yggl.png"></image>
				</view>
				<text>员工管理</text>
			</navigator>
		</view>

		<!-- 5_tools -->
		<view class="tools">
			<view class="title_box1 dpflxr wp">
				<text class="tbTilte">常用工具</text>
			</view>
			<navigator url="../index_reservation/index_reservation" class="infoItem wp entry2 dpflxrjb last">
				<view class="iTitle dpflxr">
					<view class="icon">
						<image src="../../static/images/icon_yygl.png"></image>
					</view>
					<text>预约管理</text>
				</view>
				<view class="iContent dpflxr">
					<view class="rightArrow "></view>
				</view>
			</navigator>
			<navigator url="../index_writeOff/index_writeOff" class="infoItem wp entry2 dpflxrjb last">
				<view class="iTitle dpflxr">
					<view class="icon">
						<image src="../../static/images/icon_ddhx.png"></image>
					</view>
					<text>订单核销</text>
				</view>
				<view class="iContent dpflxr">
					<view class="rightArrow "></view>
				</view>
			</navigator>
			<view  class="infoItem wp entry2 dpflxrjb last" @click="outLogin()">
				<view class="iTitle dpflxr">
					<view class="icon">
						<image src="../../static/images/icon_ddhx_tcdl.png"></image>
					</view>
					<text>退出登录</text>
				</view>
				<view class="iContent dpflxr">
					<view class="rightArrow "></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from "@/api/index.js";
    import configs from "@/config/common.js";
	export default {
		data() {
			return {
				info: [],
				title: 'Hello',
				shop_name: uni.getStorageSync('shop_name'),
				barHeight: 0,
				imgu: ['https://babybear-fx.oss-cn-shenzhen.aliyuncs.com/VIPxcx/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%9B%BE%E7%89%87/img_bg.jpg',
					'https://babybear-fx.oss-cn-shenzhen.aliyuncs.com/VIPxcx/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%9B%BE%E7%89%87/icon_userPhoto1.jpg',
					'https://babybear-fx.oss-cn-shenzhen.aliyuncs.com/VIPxcx/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%9B%BE%E7%89%87/icon_logo.png'
				]
			}
		},
		onLoad() {
			var shop_id = uni.getStorageSync('shop_id');
			if (shop_id) {
				this.getUserInfo(info => {
					this.info = info
				})
			} else {
				wx.redirectTo({
					url: '/pages/welcome/welcome'
				})
			}
		},
		mounted() {
			var sys = uni.getSystemInfoSync();
			this.barHeight = sys.statusBarHeight;
		},
		methods: {
			getUserInfo: function(callback) {
				var url = '/shop/store-api/'+ uni.getStorageSync('shop_id') +'/frontUserinfo/employee'
				
				request.http(url, 'GET').then(info => {
					if(info.data.code == 0){
						callback(info.data.data);
					}
				})
			},
			outLogin(){
				uni.showModal({
					content: "退出登录",
					confirmText: "确定",
					cancelText: "取消",
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
					
							uni.setStorageSync('shop_id', "");
							uni.setStorageSync('shop_name', "");
							uni.setStorageSync('authorization', "");
							uni.reLaunch({
								url: '/pages/welcome/welcome'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
				// uni.showLoading({
				// 	title:'正在退出...'
				// })
				// uni.request({
				// 	url: configs.myBaseUrl+'/auth/token/logout',
				// 	method:'DELETE',
				// 	header: {
				// 		'Content-Type': 'application/json',
				// 		'Authorization': uni.getStorageSync('authorization')
				// 	},
				// 	success: (res) => {
				// 		console.log(res);
				// 		if(res.data.code==0){
				// 			uni.clearStorage();
				// 			uni.reLaunch({
				// 				url: '/pages/welcome/welcome'
				// 			})
				// 		}else{
				// 			uni.showToast({
				// 				title:res.data.msg
				// 			})
				// 		}
				// 	},
				// 	complete() {
				// 		uni.hideLoading();
				// 	}
					
				// })
			
			}
		}
	}
</script>

<style src="../../static/css/app.css"></style>
<style>
	page {
		background: #FFFFFF;
	}

	.bgImg {
		width: 100%;
		height: 400rpx;

	}

	.bgImg image {
		position: absolute;
	}

	.bgImg .cover {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 1;
	}

	/* 2_pageTitle */
	.pageTitle {
		font-size: 40rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 88rpx;
		left: 30rpx;
		z-index: 2;
	}

	/* 3_userInfo-- */
	.userInfo {
		width: 100%;
		height: 100rpx;
	}

	.userInfo .uiImg {
		z-index: 1;
	}

	.userInfo .avatar {
		width: 160rpx;
		height: 160rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		border: 2rpx #ffffff solid;
		overflow: hidden;
		left: 30rpx;
		top: -90rpx;
		z-index: 2;
	}

	.userInfo .words {
		left: 220rpx;
		top: -50rpx;
		z-index: 2;
		color: #fff;
	}

	.userInfo .words .icon {
		width: 28rpx;
		height: 28rpx;
		margin-right: 8rpx;
	}

	.userInfo .words .name {
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 32rpx;
		margin-top: 40rpx;
	}

	/* 4_category */
	.funcCate {
		background-color: #FFFFFF;
		width: 100%;
	}

	.funcCate .fcItem {
		width: calc(100% / 3);
		height: 254rpx;
		font-size: 28rpx;
		line-height: 28rpx;
		color: #333333;
	}

	.funcCate .fcItem .icon {
		width: 88rpx;
		height: 88rpx;
		margin-bottom: 20rpx;
	}

	/* 5_tools */
	.tools {
		border-top: 20rpx #f5f5f5 solid;
	}
</style>
